<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>事件</title>
		<style type="text/css">
			input{font-size:26px;margin-top: 20px;}
			body{background-image: url(images/grassland.png);}
			#mytank{position: absolute;left:10px;top:100px}
		</style>
	</head>
	<body>
		<!--179000627 余倍	-->
		<input type="button" value="按钮一" id="btn1" onclick="btn1()"/>
		<input type="button" value="按钮二" id="btn2" ondblclick="btn2()" />
		<input type="button" value="按钮三" id="btn3" onclick="btn3()" onmouseover="btn3_move()"/>
		<hr />
		<img id="mytank" src="images/right.png"/>
		<script type="text/javascript">
			var mytank = document.getElementById('mytank');
			window.addEventListener(
				'keydown',
				function(e){
					console.log(e.keyCode);
					let left=mytank.offsetLeft;
					let top=mytank.offsetTop;
					//向右
					if(e.keyCode == 39){
						if (left>1440){
							alert("您已经到最右边了");
						}else {
							mytank.src="images/right.png";
							mytank.style.left = (mytank.offsetLeft + 10) + 'px';
						}
					}
					//向左
					if (e.keyCode == 37){
						if (left<0){
							alert("您已经到最左边了");
						}else {
							mytank.src="images/left.png";
							mytank.style.left = (mytank.offsetLeft - 10) + 'px';
						}
					}
					//向上
					if (e.keyCode == 38){
						if (top<84){
							alert("您已经到最上边了");
						}else {
							mytank.src="images/up.png";
							mytank.style.top = (mytank.offsetTop - 10) + 'px';
						}
					}
					//向下
					if (e.keyCode == 40){
						if (top>695){
							alert("您已经到最下边了");
						}else {
							mytank.src="images/down.png";
							mytank.style.top = (mytank.offsetTop + 10) + 'px';
						}
					}
				});

			//按钮一
			function btn1() {
				alert("javascript事件测试一");
			}

			//按钮二
			function btn2() {
				document.getElementById("btn2").value="按钮二测试";
			}

			//按钮三
			function btn3() {
				alert("javascript事件测试三");
			}
			function btn3_move() {
				document.getElementById("btn3").style.backgroundColor="pink";
				document.getElementById("btn3").style.color="blue";
			}

			// 禁用右键
			document.onmousedown = function(){
				if(event.button == 2){
					alert("当前页面不能使用右键！");
					return false;
				}
			}
		</script>
	</body>
</html>
